<template>
  <div
      class="main-bg" >
    <el-table
      size="small"
              @selection-change="handleSelectionChange"
               :max-height="slide_h"
               :row-class-name="tableRowClassName" border
                style="width:100%"
               :empty-text="(data.data!=null&&data.data.length==0)?'空空如也':'数据初始化中...'"
               :data="data.data"
                ref="table"
                >
      <!--<el-table-column fixed width="50" type="selection"  />-->
      <el-table-column type="expand" width="50" label="#">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="创建时间">
              <span>{{ props.row.createTime }}</span>
            </el-form-item>
            <el-form-item label="最后修改时间">
              <span>{{ props.row.updateTime }}</span>
            </el-form-item>
            <el-form-item label="操作IP">
              <span>{{ props.row.operator }}</span>
            </el-form-item>
            <el-form-item label="映射路径">
              <span>{{ props.row.url }}</span>
            </el-form-item>
            <el-form-item label="类方法名">
              <span>{{ props.row.methodName }}</span>
            </el-form-item>
            <el-form-item label="类包名">
              <span>{{ props.row.className }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column width="50" prop="id" label="ID"/>
      <el-table-column prop="name" label="权限名称"/>
      <el-table-column prop="desc" label="权限备注"/>
      <el-table-column width="80" label="权限状态">
        <template slot-scope="scope">
          <span class="el-icon-success" style="color:#67C23A" v-if="scope.row.state">已启用</span>
          <span v-else class="el-icon-success" style="color:#fe0000">已禁用</span>
        </template>
      </el-table-column>
      <el-table-column width="80" label="是否公开">
        <template slot-scope="scope">
          <span class="el-icon-success" style="color:#67C23A" v-if="scope.row.open">公开</span>
          <span v-else class="el-icon-success" style="color:#fe0000">私有</span>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="group" label="权限组"/>
      <el-table-column width="80" prop="sort" label="组序号"/>
      <el-table-column width="100" label="请求类型">
        <template slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.httpMethod=='POST'" type="success">{{scope.row.httpMethod}}</el-tag>
          <el-tag size="mini" v-else type="primary">{{scope.row.httpMethod}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="100" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="修改权限" placement="top">
            <el-button class="el-icon-edit" type="primary" @click="handleClick(scope.row)" size="mini">
              <!--添加-->
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>

    </el-table>
    <v-page v-if="pageinfo.pages!=null" :pageinfo='pageinfo' @changepageinfo="changepaginfo"></v-page>
    <v-dialog v-if="dialogshow == 1" :dialogshow="dialogshow==1" :dialoginfo="dialoginfo"
              @changedialogshow="changedialogshow"></v-dialog>
  </div>
</template>
<script>
  const pagination = () =>
    import ("@/components/pagination/pagetemplate")
  const dialog = () =>
    import ("@/components/modules/sysManagement/perm/view_dialog_editSysPerm.vue")
  export default {
    components: {
      "v-page": pagination,
      "v-dialog": dialog
    },
    data() {
      return {
        dialoginfo: {},
        isajax: false,
        data: "",
        slide_h: (window.document.body.offsetHeight - 164),
        pageinfo:this.$store.getters.getPageInfo(this.$route.path),
        dialogshow: 0,
        loadingTxt: "",
        multipleSelection: []
      }
    },
    methods: {
      init(){
        this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.findAllSysPerms,lock:1,text:this.loadingTxt});
        this.proAPI.getJson(this.proAPI.URLS.findAllSysPerms,this.proUtil.generateParams(this.pageinfo.params)).then((res) => {
            this.data = res;
            this.pageinfo.total =res.total;
            this.pageinfo.pages =res.pages;
        })
      },
      handleClick(row) {
        // console.log(row);
        var t = {};
        for (var key in row) {
          if (key != "operator" && key != "operatorIp" && key != "createTime" && key != "updateTime") {
            t["" + key + ""] = row["" + key + ""]
          }
        }
        // console.log(t);
        this.dialoginfo = t;
        this.dialogshow = 1;
        // console.log(this.dialogshow);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        // console.log(this.multipleSelection);
      },
      changepaginfo() {
        this.$store.commit("savePageInfo",this.pageinfo);
        // console.log(this.pageinfo);
        this.init();
      },
      changedialogshow() {
        this.dialogshow = 0;
        // console.log(this.dialogshow);
      },
      checkstatus(row) {
        return row.status != 1;
      },
      tableRowClassName({row, rowIndex}) {
        if (row.status === 1) {
          return 'success-row';
        }
        return '';
      },
      indexMethod(index) {
        // console.log(this.data[index]);
        return index;
      }
    },
    mounted() {
      this.init();
    },
    updated() {
      // console.log(333);
    }
  }
</script>
<style media="scoped">
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 100px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
